<template>
    <view>
        <view class="search-box">
            <!-- 使用自定义的搜索组件 -->
            <!-- 动态绑定自定义增强属性 :radius='16'搜索框圆角-->
            <my-search :radius='16' @myclick="gotoSearch"></my-search>     
        </view>
        
      <!-- 轮播图区域-->
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" current="true">
          <swiper-item v-for="(item,i) in swiperList" :key="i">
              <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
                  <image :src="item.image_src"></image>
              </navigator>
          </swiper-item>         
      </swiper>
      
      <!-- 分类导航区 -->
      <view class="nav-list">
          <view class="nav-item" v-for="(item,index) in navList" :key="index" @click="navClickHandler(item)">
              <image :src="item.image_src" class="nav-img"></image>              
          </view>
      </view>
      
      <!-- 楼层区域 -->
      <view class="floor-list">
          <!-- 楼层item项 -->
          <view class="floor-item" v-for="(item,index) in floorList" :key="index">
              <!-- 楼层标题 -->
              <image :src="item.floor_title.image_src" class="floor-title"></image>              
              <!-- 楼层图片区域 -->
              <view class="floor-img-box">
                  <!-- 左侧大图片盒子 -->
                  <navigator class="left-img-box" :url="item.product_list[0].url">
                      <image :src="item.product_list[0].image_src" :style="{width : item.product_list[0].image_width+'rpx'}" 
                      mode="widthFix"></image>
                  </navigator>
                  <!-- 右侧4个小图片盒子 -->
                  <view class="right-img-box">
                      <navigator class="right-img-item" v-for="(item2,index2) in item.product_list" :key="index2" v-show="index2 !==0" :url="item2.url">
                          <image :src="item2.image_src" :style="{width : item2.image_width+'rpx'}" mode="widthFix"></image>
                      </navigator>                     
                  </view>
              </view>

          </view>                              
      </view>
      
    </view>
</template>

<script>
    import badgeMix from "@/mixins/tabbar-badge.js"
    export default {
        //将badgeMix混入到当前的页面中进行使用
        mixins:[badgeMix],
        data() {
            return {
               //1.轮播图的数据列表,默认为空数组:
                swiperList : [],
                //分类导航的数据列表:
                navList : [],
                //楼层数据列表:
                floorList:[]

            }
        },
        onLoad(){
            //2.在小程序页面刚加载时,调用获取轮播图数据方法:
            this.getSwiperList(),
            //调用获取分类导航数据:
            this.getNavList(),
            //调用获取楼层数据:
            this.getFoorList()
        },               
        methods:{
            //3.定义获取轮播图数据方法:
            async getSwiperList(){
                //3.1发起请求:
                const {data: res} = await uni.$http.get("/api/public/v1/home/swiperdata")
                //3.2请求失败:
                if (res.meta.status !==200) return uni.$showMsg()
                //3.3请求成功,为data中的数据赋值                             
                this.swiperList = res.message
                //console.log(res)                
                uni.$showMsg("数据请求成功")
            },
            //定义获取导航数据的方法:
            async getNavList(){
                const {data:res}=await uni.$http.get("/api/public/v1/home/catitems")
                if (res.meta.status !==200) return uni.$showMsg()
                this.navList=res.message
                //uni.$showMsg("数据请求成功")
                //console.log(res.message)                
            },
            
            //定义点击
            navClickHandler(item){
                //console.log(item)
                if(item.name==="分类"){
                    uni.switchTab({
                        url:"/pages/cate/cate"
                    })
                }
            },
            
            //定义获取楼层数据的方法:
            async getFoorList(){
                const {data:res}=await uni.$http.get("/api/public/v1/home/floordata")
                if (res.meta.status !==200) return uni.$showMsg()
                
                //对数据进行处理:
                res.message.forEach(floor=>{
                    floor.product_list.forEach(prod=>{
                        prod.url="/subpkg/goods_list/goods_list?"+prod.navigator_url.split("?")[1]
                    })
                })
                this.floorList=res.message
                //console.log(res.message)
            },
            // 搜索页面
            gotoSearch(){
                uni.navigateTo({
                    url:"/subpkg/search/search"
                })
            }
        }
    }
</script>

<style lang="scss">
    swiper{
        height:330rpx;
        .swiper-item,image{
            width:100%;
            height:100%
        }
    }
    
    .nav-list{
        display: flex;
        justify-content: space-around;
        margin: 15px 0;}
    .nav-img{
        width: 128rpx;
        height: 140rpx;
    }
    
    .floor-title{
        height: 60rpx;
        width: 100%;
        display: flex;
    }
    
    .right-img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .floor-img-box{
        display: flex;
        padding-left: 10rpx;
    }
    
    .search-box{
        //设置定位效果:"吸顶"
        position: sticky;
        //吸顶的位置
        top:0;
        //提高层级,防止被轮播图覆盖
        z-index: 999;
    }
</style>
